<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        计算属性 (computed)
            1、计算属性在vue的配置中以 computed:{} 方式定义; 其中key为属性名; value为属性值，属性值的定义必须取值Function或Object;
            2、计算属性从模板语法使用的角度上来说，就是vue的另外一个数据仓库; 其中计算属性在模板中调用时和普通变量的调用一样，值为方法执行后返回结果;
            3、计算属性取值的方法，在vue环境下运行时，方法内的this指向与当前vue的实例对象；
            4、计算属性具有缓存特点，可以在vue运行时提升数据变化渲染的效率；
                + 在同一个vue容器中，一个计算属性被多次调用，只有第一次调用的计算属性会触发计算属性方法的执行，并且执行结果被缓存；
                  后续的改计算属性的调用都直接从缓存中读取。
                + 计算属性同样具有响应式特性，变量变化计算属性的计算结果也会同时变化，此时计算属性会再次被调用一次并完成结果缓存；
                  页面中的计算属性调用依然从缓存中加载新的数据。
            5、普通函数完成的数据统计，再页面无相关变量发生变化依然会触发方法执行，而计算属性不会；

        计算属性的双向操作
            1、计算属性默认取值为function，该取值下计算属性为只读属性；
            2、计算属性取值 固定对象格式【 { get:function(){},set:function(){} } 】时可以完成可读可写的定义；
        
        计算属性的核心
            计算属性通过 公开 Object.defineProperty 的get set 配置提供属性执行方法的扩展定义功能 

        计算属性的应用
            + 计算属性多数都是使用统计功能，完成data数据仓库中的数据统计，只涉及到取值操作（get）
            + 如果项目中存在一个变量的取值和赋值逻辑差异较大，可以直接使用计算属性分解 get 和 set
        </pre>
        <p>msg:{{ msg }}</p>
        <input v-model="msg" type="text" />
        <br><br>
        <p>info:{{ info }}</p>
        <input v-model="info" type="text" />
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    text:"仓库变量",
                    tempInfo:"info变量"
                }
            },
            computed: {
                // 取值方法时 计算属性才是只读属性
                /*
                Object.defineProperty(vue实例，"msg",{
                    get:function(){
                        return this.text+"-计算属性"
                    }
                })
                */
                msg(){
                    return this.text+"-计算属性"
                },
                /*
                Object.defineProperty(vue实例，"info",{
                    get:function(){
                        return ……
                    },
                    set:function(nv){
                        中间变量 = nv;
                    }
                })
                */
                info:{
                    get(){
                        console.log("info-get")
                        // return "info变量"
                        return this.tempInfo;
                    },
                    set(nv){
                        console.log("info-set")
                        console.log("info的新数据值:",nv)
                        this.tempInfo = nv;
                    }
                }
            },
            methods: {
                
            },
        }).mount("#app")
    </script>
</body>
</html>